<template>
    <el-dialog v-model="dialogVisible" :title="props.title" :width="props.width" :draggable="true" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <!-- 插槽 -->
        <slot></slot>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <!-- :loading="btnLoading" 加载动画开启 -->
                <el-button type="primary" @click="submit" :loading="btnLoading">
                    {{ props.confirmText }}
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

// 响应式的开关对话框的状态
const dialogVisible = ref(false)

// 打开 对话框的方法
const open = () => dialogVisible.value = true
// 关闭 对话框的方法
const close = () => dialogVisible.value = false

// 确认按钮加载 loading
const btnLoading = ref(false)
// 显示 loading
const showBtnLoading = () => btnLoading.value = true
// 隐藏 loading
const closeBtnLoading = () => btnLoading.value = false

// 对外暴露属性
const props = defineProps({
    title: String, // 字段类型 标题
    width: { //宽度
        type: String, 
        default: '40%' // 默认值
    },
    destroyOnClose: { //当对话框关闭时是否销毁实例
        type: Boolean,
        default: false
    },
    confirmText: { //按钮的文本
        type: String,
        default: '提交'
    }
})


//defineEmits 函数用于定义自定义事件，并返回一个函数，用于触发自定义事件。
// efineEmits 定义了一个名为 submit 的自定义事件
//通过 emit() 函数，可以触发自定义事件。
const emit = defineEmits(['submit'])

//定义了一个名为 submit 的方法 调用这个方法的时候 会触发submit事件
//封装了事件的触发逻辑，使得在其他地方调用 submit() 就可以触发事件。
const submit = () => emit('submit')



// 暴露给父组件
defineExpose({
    open,
    close,
    showBtnLoading,
    closeBtnLoading
})

</script>
